// 香港地图模块
(function () {
    // 实例化对象
    var myChart = null;

    // 香港18个区域的坐标数据
    const hkDistrictCoords = {
        '中西区': [114.154292, 22.286939],
        '湾仔区': [114.182687, 22.276345],
        '东区': [114.225917, 22.279809],
        '南区': [114.174942, 22.246978],
        '油尖旺区': [114.173347, 22.311632],
        '深水埗区': [114.162764, 22.330983],
        '九龙城区': [114.195053, 22.328511],
        '黄大仙区': [114.203615, 22.343066],
        '观塘区': [114.231358, 22.317788],
        '葵青区': [114.139343, 22.364386],
        '荃湾区': [114.122952, 22.370973],
        '屯门区': [113.977762, 22.391813],
        '元朗区': [114.039778, 22.443235],
        '北区': [114.148196, 22.494085],
        '大埔区': [114.171391, 22.445660],
        '沙田区': [114.195812, 22.382839],
        '西贡区': [114.264813, 22.314203],
        '离岛区': [113.946345, 22.286940]
    };

    // 生成区域数据
    function generateDistrictData() {
        // 如果Config中已有区域数据，直接使用
        if (window.Config && Config.districtData && Config.districtData.length > 0) {
            return Config.districtData;
        }

        // 否则生成模拟数据
        return Object.keys(hkDistrictCoords).map(function (name) {
            return {
                name: name,
                value: Math.floor(Math.random() * 100), // 人口密度
                economy: Math.floor(Math.random() * 100), // 经济活力
                housing: Math.floor(Math.random() * 100) // 房价指数
            };
        });
    }

    function init() {
        myChart = echarts.init(document.querySelector(".map .chart"));

        // 异步加载香港地图数据
        fetch('https://geo.datav.aliyun.com/areas_v3/bound/810000_full.json')
            .then(response => response.json())
            .then(data => {
                // 注册地图数据
                echarts.registerMap('HK', data);

                // 配置并渲染地图
                renderMap();

                // 添加点击事件监听
                myChart.on('click', function(params) {
                    const districtData = generateDistrictData();
                    const clickedDistrict = districtData.find(d => d.name === params.name);

                    if (clickedDistrict) {
                        console.log("地图模块：选择了区域", clickedDistrict.name);

                        // 确保使用全局 EventBus
                        if (window.EventBus) {
                            // 发送更新柱状图的事件
                            window.EventBus.emit("updateBarChart", clickedDistrict);

                            // 同时发送通用的区域选择事件
                            window.EventBus.emit("districtSelected", clickedDistrict);
                        } else {
                            console.error("EventBus 未定义，请检查eventBus.js是否正确加载");
                        }

                        // 高亮显示选中的区域
                        myChart.dispatchAction({
                            type: 'select',
                            name: clickedDistrict.name
                        });
                    }
                });

                // 注册事件监听（在地图加载完成后）
                if (window.EventBus) {
                    EventBus.on("metricChanged", function (metric) {
                        console.log("地图收到指标变更:", metric);
                        renderMap();
                    });
                }
            })
            .catch(error => {
                console.error('加载香港地图数据失败:', error);
                document.querySelector(".map .chart").innerHTML =
                    '<div style="color:white;text-align:center;padding-top:100px">地图数据加载失败，请检查网络连接</div>';
            });
    }

    function renderMap() {
        const districtData = generateDistrictData();

        // 更新颜色方案以匹配深蓝色背景
        const colorScheme = {
            lowValue: '#0f4c81',
            midValue: '#1a73e8',
            highValue: '#60dafb',
            areaBackground: 'rgba(29, 62, 155, 0.3)',
            areaHover: '#4e7bce',
            borderNormal: 'rgba(84, 175, 255, 0.8)',
            borderEmphasis: '#6edbff'
        };

        const option = {
            backgroundColor: 'transparent',
            title: {
                left: 'center',
                top: 10,
                textStyle: {
                    color: '#fff',
                    fontSize: 18,
                    fontWeight: 'normal',
                    textShadow: '0 0 10px rgba(99, 226, 255, 0.5)'
                },
                subtextStyle: {
                    color: 'rgba(255, 255, 255, 0.7)',
                    fontSize: 12
                }
            },
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(8, 30, 73, 0.85)',
                borderColor: 'rgba(50, 149, 237, 0.6)',
                borderWidth: 1,
                textStyle: {
                    color: '#fff',
                    fontSize: 12
                },
                extraCssText: 'border-radius: 8px; box-shadow: 0 0 10px rgba(28, 126, 225, 0.5);'
            },
            visualMap: {
                min: 0,
                max: 100,
                text: ['高', '低'],
                realtime: true,
                calculable: true,
                inRange: {
                    color: [colorScheme.lowValue, colorScheme.midValue, colorScheme.highValue]
                },
                textStyle: {
                    color: 'rgba(255, 255, 255, 0.8)'
                },
                right: 20,
                bottom: 20,
                itemHeight: 100,
                itemWidth: 18,
                textGap: 10,
                precision: 0,
                formatter: '{value}',
                borderWidth: 0,
                backgroundColor: 'rgba(9, 24, 43, 0.4)',
                padding: [10, 15],
                borderRadius: 8
            },
            series: [
                {
                    name: '香港',
                    type: 'map',
                    map: 'HK',
                    label: {
                        show: true,
                        color: 'rgba(255, 255, 255, 0.85)',
                        fontSize: 9,
                        fontWeight: 'normal',
                        backgroundColor: 'rgba(0, 23, 67, 0.5)',
                        padding: [3, 5],
                        borderRadius: 3,
                        formatter: '{b}',
                        position: 'center'
                    },
                    zoom: 1.2,
                    roam: true,
                    animation: true,
                    animationDuration: 1000,
                    animationEasing: 'cubicOut',
                    animationDelay: function (idx) {
                        return idx * 50;
                    },
                    emphasis: {
                        label: {
                            show: true,
                            color: '#fff',
                            fontSize: 11,
                            fontWeight: 'bold',
                            backgroundColor: 'rgba(38, 83, 203, 0.6)'
                        },
                        itemStyle: {
                            areaColor: colorScheme.areaHover,
                            borderColor: colorScheme.borderEmphasis,
                            borderWidth: 1.5,
                            shadowColor: 'rgba(99, 226, 255, 0.8)',
                            shadowBlur: 10
                        }
                    },
                    select: {
                        itemStyle: {
                            areaColor: '#3d8be0',
                            borderColor: '#76f0ff',
                            borderWidth: 2
                        },
                        label: {
                            color: '#ffffff',
                            fontWeight: 'bold',
                            backgroundColor: 'rgba(38, 83, 203, 0.8)'
                        }
                    },
                    selectedMode: 'single',
                    itemStyle: {
                        normal: {
                            areaColor: colorScheme.areaBackground,
                            borderColor: colorScheme.borderNormal,
                            borderWidth: 1,
                            shadowColor: 'rgba(99, 226, 255, 0.2)',
                            shadowBlur: 5
                        }
                    },
                    data: districtData
                }
            ]
        };

        myChart.setOption(option);
    }

    // 窗口大小改变时调整地图大小
    window.addEventListener("resize", function () {
        if (myChart) {
            myChart.resize();
        }
    });

    // 初始化地图
    init();
})();
